import UserLabel from './UserLabel'

interface Room {
  createTime: number,
  gameType: number,
  roomDescribe: string,
  roomNo: string,
  totalTurns: number,
  turns: number
}

interface BattleData {
  backUrl: string,
  finishList: Array<any>,
  room: Room,
  clubRoom: Boolean
}

interface GameInfo {
  name: string,
  gameId: number,
  component: any,
  images: string,
  width: number,
  height: number
}

declare var window: any

class MainComponent extends eui.Component {
  private tileGroup: eui.Group
  private gameName: eui.Label
  private gameTime: eui.Label
  private roomNo: eui.Label
  private round: eui.Label
  private bottomBtn: eui.Group
  private ruleDesc: eui.Label
  private backRoomBtn: eui.Image
  private shareBtn: eui.Image

  public battleData: BattleData
  public gameInfo: GameInfo

  private uiLabelNumber: number = 0

  constructor() {
    super()
    this.battleData = window.battleData
    this.gameInfo = window.gameInfo
    this.once(eui.UIEvent.COMPLETE, this.onComplete, this)
    this.skinName = `<e:Skin class="NiuniuSkin" width="720" height="1166" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing">
      <e:Image source="tenniu-di_png" x="0" y="0" width="720" height="1166" touchEnabled="false" locked="true"/>
      <e:Group horizontalCenter="0" percentWidth="88" height="72" top="110">
        <e:Group percentWidth="100" height="36" y="0" x="2">
          <e:Label id="gameName" text="" left="0" size="22" textColor="0xffffff"></e:Label>
          <e:Label id="gameTime" text="" right="0" size="22" textColor="0xffffff"></e:Label>
        </e:Group>
        <e:Group percentWidth="90" height="36" y="36" x="26">
          <e:Label id="roomNo" text="" left="0" size="24"></e:Label>
          <e:Label id="round" text="" left="200" size="24"></e:Label>
          <e:Label id="ruleDesc" text="" right="0" size="24"></e:Label>
        </e:Group>
      </e:Group>

      <e:Group id="tileGroup" horizontalCenter="32" percentWidth="94" height="750"  top="165">
      </e:Group>

      <e:Label text="游戏结果仅作娱乐用途,禁止用于赌博行为" size="20" right="80" y="1000" textColor="0x346b28"></e:Label>         

      <e:Group id="bottomBtn" x="0" y="1039" percentWidth="100" height="85">
        <e:Image id="backRoomBtn" source="back-room_niuniu_png"></e:Image>
        <e:Image id="shareBtn" source="btn-share_png"></e:Image>
      </e:Group>
    </e:Skin>`
  }

  private onComplete(e: eui.UIEvent) {
    var vLayout:eui.VerticalLayout = new eui.VerticalLayout()
    vLayout.gap = 0
    vLayout.horizontalAlign = egret.HorizontalAlign.CENTER
    this.tileGroup.layout = vLayout //设置问垂直布局

    // this.roomNo.text = `房号 ${this.battleData.room.roomNo}`
    // this.round.text = `局数 ${this.battleData.room.turns}/${this.battleData.room.totalTurns}`

    const roomDescribe = JSON.parse(this.battleData.room.roomDescribe)
    const ruleName = (roomDescribe.ruleType === 0 || roomDescribe.bankerType === 0) ? `${roomDescribe.turns}轮庄` : `${roomDescribe.turns * 15}局`
    // this.ruleDesc.text = `明${roomDescribe.showCardCount},${ruleName}`
    this.gameName.text = `帅帅${this.gameInfo.name}(明${roomDescribe.showCardCount},${ruleName}) 房号 ${this.battleData.room.roomNo}`
    if(this.gameInfo.name.match('金花'))  {
      this.gameName.text = `帅帅${this.gameInfo.name} 局数: ${this.battleData.room.turns}/${this.battleData.room.totalTurns} 房号:${this.battleData.room.roomNo}`
    }
    this.gameTime.text = window.util.getDateTime(this.battleData.room.createTime)
    this.battleData.finishList.forEach(player => {
      const userLabel = new UserLabel(player)
      this.tileGroup.addChild(new UserLabel(player))
    })

    if (window.isMiniProgram) {
      this.bottomBtn.removeChild(this.backRoomBtn)
    }
    if(this.battleData.clubRoom){
      this.backRoomBtn.source = 'niuniu-back-club_png'
    }
    var hLayoutBottom:eui.HorizontalLayout = new eui.HorizontalLayout()
    hLayoutBottom.gap = 100
    hLayoutBottom.horizontalAlign = egret.HorizontalAlign.CENTER
    this.bottomBtn.layout = hLayoutBottom
    this.shareBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, function (argument) {
      if (sessionStorage.getItem('oauthMode') == 'xianliao') {
          this.dispatchEvent(new egret.Event('onXianliaoShare'));
      }
    }, this);
    window.eventDispatcher.addEventListener('ok', function() {
    this.uiLabelNumber++
      console.log('labelOnComplete', this.backRoomBtn)
      if (this.uiLabelNumber >= this.battleData.finishList.length) {
        this.dispatchEvent(new egret.Event('renderOk'))
      }
    }, this)
  }

}

export default MainComponent